<template>
	<!-- 免费订单 -- 宽带  -->
	<ContentWrap>
		<!-- 搜索工作栏 -->
		<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
			<el-form-item label="中间件" prop="netSysId">
				<el-select v-model="queryParams.netSysId" placeholder="中间件" class="!w-240px" clearable>
					<el-option v-for="n in sysConfigList" :key="n.id" :label="n.community.name" :value="n.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="宽带账号" prop="account">
				<el-input v-model="queryParams.account" placeholder="请输入宽带账号" clearable @keyup.enter.stop="handleQuery" />
			</el-form-item>
			<el-form-item label="地址" prop="accountAddrOfLf">
				<el-input v-model="queryParams.accountAddrOfLf" placeholder="请输入地址" clearable @keyup.enter.stop="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
			</el-form-item>
		</el-form>
	</ContentWrap>
	<!-- 列表 -->
	<ContentWrap>
		<el-table v-loading="loading" :data="list" :stripe="true">
			<el-table-column label="编号" align="center" prop="id" width="100" />
			<el-table-column label="中间键/标题/地址" align="left" prop="status" min-width="360">
				<template #default="scope">
					<template v-for="n in sysConfigList" :key="n.id + '_1'">
						<div v-if="n.id == scope.row.netSysId">中间键：{{ n.community.name }}</div>
					</template>
					<div>
						标题： <el-link type="primary" @click="showAddr(scope.row)">{{ scope.row.subject }}</el-link>
					</div>
					<div>地址： {{ scope.row.accountAddrOfLf }}</div>
				</template>
			</el-table-column>
			<el-table-column label="会员/账号/编号" align="left" prop="status" min-width="200">
				<template #default="scope">
					<div>会员： {{ scope.row.memberUserId }}</div>
					<div>
						账号： <el-link type="success" @click="getMemberuser(scope.row.memberUserId)"> {{ scope.row.memberUserId }}（{{ scope.row.account }}）</el-link>
					</div>
					<div>编号：{{ scope.row.orderId }}</div>
				</template>
			</el-table-column>
			<el-table-column label="支付金额/扣除手续后金额" align="left" prop="status" width="220">
				<template #default="scope">
					<div>支付金额： {{ divide(scope.row.amount, 100) }}</div>
					<div>扣除手续后金额： {{ divide(scope.row.balance, 100) }}</div>
				</template>
			</el-table-column>

			<el-table-column label="创建时间/支付成功" align="left" width="380">
				<template #default="scope">
					<div>创建时间：{{ formatDate(scope.row.createTime) }}</div>
					<div>支付成功：{{ formatDate(scope.row.successTime) }}</div>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="left" prop="status" width="160">
				<template #default="scope">
					<div style="margin-bottom: 10px">支付状态：<dict-tag :type="DICT_TYPE.UNION_MINI_PAY_STATUS" :value="scope.row.status" /></div>
					<div>下发状态：<dict-tag :type="DICT_TYPE.NET_DOWN_FLAG" :value="scope.row.downNetFlag" /></div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
	</ContentWrap>
</template>
<script setup lang="ts">
	import * as NetFreeOrderApi from '@/api/zwsj/netFreeOrder'
	import { getNetSysConfigs } from '@/api/zwsj/netSysConfig'
	import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
	import { formatDate } from '@/utils/formatTime'
	import { divide } from '@/utils/tools'
	import { getUser } from '@/api/member/user/index'

	defineOptions({ name: 'netFreeOrder' })

	// const message = useMessage() // 消息弹窗
	// const { t } = useI18n() // 国际化

	const loading = ref(true) // 列表的加载中
	const total = ref(0) // 列表的总页数
	const list = ref([]) // 列表的数据
	const queryParams = reactive({
		pageNo: 1,
		pageSize: 10,
		memberUserId: null,
		accountAddrOfLf: null,
		account: null,
	})
	const sysConfigList = ref([])

	/** 查询列表 */
	const getList = async () => {
		loading.value = true
		try {
			const data = await NetFreeOrderApi.getPage(queryParams)
			list.value = data.list
			total.value = data.total
		} finally {
			loading.value = false
		}
	}

	/** 搜索按钮操作 */
	const handleQuery = () => {
		queryParams.pageNo = 1
		getList()
	}

	const showAddr = async (row: any) => {
		ElNotification({
			title: `充值地址`,
			message: h('i', { style: 'color: teal' }, `${row.accountAddrOfLf}`),
		})
	}

	const getMemberuser = async (memberUserId: number) => {
		const data = await getUser(memberUserId)
		ElNotification({
			title: `人员姓名：${data.nickname}`,
			message: h('i', { style: 'color: teal' }, `手机号码：${data.mobile}`),
		})
	}

	onMounted(() => {
		getNetSysConfigs().then(data => {
			sysConfigList.value = data
		})
		getList()
	})
</script>
<style lang="scss" scoped></style>
